// color variants
@use 'sass:meta';

// third party
@use 'simplebar-react/dist/simplebar.min.css';

// ==============================|| TAP HIGHLIGHT ||============================== //

* {
  -webkit-tap-highlight-color: transparent !important;
}

// ==============================|| APEXCHART ||============================== //

.apexcharts-legend-series {
  gap: 8px;
}

.apexcharts-canvas {
  .apexcharts-tooltip-series-group.apexcharts-active,
  .apexcharts-tooltip-series-group:last-child {
    padding-bottom: 0;
  }
}

.apexcharts-menu-icon svg,
.apexcharts-reset-icon svg,
.apexcharts-zoom-icon svg,
.apexcharts-zoomin-icon svg,
.apexcharts-zoomout-icon svg {
  fill: var(--palette-text-secondary) !important;
}

.apexcharts-pan-icon svg {
  stroke: var(--palette-text-secondary) !important;
  fill: transparent !important;
}

.apexcharts-zoom-icon.apexcharts-selected svg {
  fill: var(--palette-primary-main) !important;
}

.apexcharts-pan-icon.apexcharts-selected svg {
  stroke: var(--palette-primary-main) !important;
}

.apexcharts-toolbar .apexcharts-pan-icon:hover:not(.apexcharts-selected) svg {
  stroke: var(--palette-grey-600) !important;
}

.apexcharts-toolbar div:hover:not(.apexcharts-selected):not(.apexcharts-pan-icon) svg {
  fill: var(--palette-grey-600) !important;
}

.apexcharts-menu {
  background-color: var(--palette-background-paper);
}

.apexcharts-menu-item:hover {
  background-color: var(--palette-grey-200);
}

// ==============================|| ANIMATION KEYFRAMES ||============================== //

@keyframes wings {
  50% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes wingsReverse {
  50% {
    transform: translateY(40px) scaleX(-1);
  }
  100% {
    transform: translateY(0px) scaleX(-1);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -5px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -7px, 0);
  }
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes slideY {
  0%,
  50%,
  100% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-10px);
  }
  75% {
    transform: translateY(10px);
  }
}

@keyframes slideX {
  0%,
  50%,
  100% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}
